<template>
    <div class="app-container game-angle-config ">
        <el-form ref="gameAngleConfig" :inline="true" label-position="left" class="demo-ruleForm"  :model="form" :rules="rule" >
          <div class="game-angle-config__item" v-for="(item,i) in form.portList" :key="'item'+i">
            <div class="game-angle-config__top">
               <el-form-item :label="item.portName" prop="portName">
                    <!-- <el-radio-group v-model="item.recommendType">
                      <el-radio  v-for="val in typeList" :key="val.value" :label="val.value" v-if="(item.recommendType==val.value&&val.value!=0)||item.isShow">{{val.title}}</el-radio>
                    </el-radio-group> -->
              </el-form-item>
              <div>
                <div v-if="item.isShow">
                  <el-button type="primary" @click="item.isShow=false">完成</el-button>
                </div>
                <span v-else @click="item.isShow=true" >配置</span>

              </div>
            </div>
            <div class="game-angle-config__bottom" v-show='item.isShow'>
              <div class="uplode-box" v-for="(child,index) in item.detail" :key="'child'+index">
                <!--logo不用校验-->
                  <el-form-item :label="child.title"  v-if="child.area==5">
                    <editor-image color="#1890ff" class="editor-upload-btn"
                        :limit="1"
                        @click.native="handleClick(i,index)"
                        @successCBK="imageSuccessCBK">
                    </editor-image>
                  </el-form-item>
                  <!--校验图片-->
                   <el-form-item :label="child.title" prop="picUrl" v-else>
                    <editor-image color="#1890ff" class="editor-upload-btn"
                        :limit="1"
                        @click.native="handleClick(i,index)"
                        @successCBK="imageSuccessCBK">
                    </editor-image>
                  </el-form-item>
                  <div class="img-box" v-if="child.picUrl">
                      <i class="el-icon-circle-close" @click="deleteImg(child)"></i>
                     <img :src="child.picUrl"  class="image"/>
                  </div>

                   <el-form-item label="排序:"  v-if="child.canOrder" prop="position">
                    <el-select  placeholder="请选择" v-model="child.position">
                      <el-option
                        v-for="order in orderList"
                        :key="order.value"
                        :label="order.label"
                        :value="order.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
              </div>


            </div>
             <el-form-item  prop="link" label="跳转链接" v-show="item.isShow" style="margin-left:10px;position:relative;bottom:10px;" width="300px">
                <el-input  maxlength="150" placeholder="请输入" class="game-angle-config_remark" v-model="item.link"></el-input>
             </el-form-item>
        </div>
         <!--平台介绍-->
        <div class="game-angle-config__item">
            <div class="game-angle-config__top" style="padding-bottom:0;margin-bottom:20px">
               <el-form-item  prop="descript" label="平台介绍：" style="display:flex;align-items: flex-start;">
                     <el-input type="textarea" maxlength="150" rows="4" placeholder="请输入平台介绍" class="game-angle-config_remark" v-model="form.descript"></el-input>
              </el-form-item>
            </div>
        </div>
        <!--角标-->
         <el-form-item label="角标:">
            <el-radio-group v-model="form.recommendType">
              <el-radio  v-for="val in typeList" :key="val.value" :label="val.value">{{val.title}}</el-radio>
            </el-radio-group>
        </el-form-item>
        <!--所属分类-->
          <el-form-item label="所属分类" prop="navGroup">
              <el-select v-model="form.navGroup">
                <el-option  v-for="val in gameTypeList" :key="val.value" :value="val.value" :label="val.title" >{{val.title}}</el-option>
              </el-select>
          </el-form-item>
           <el-form-item  prop="walletName" label="钱包名" style="margin-top:10px;position:relative" v-if="!form.isCenterWallet" >
                     <el-input  maxlength="50" placeholder="请输入钱包名" class="game-angle-config_remark" v-model="form.walletName"></el-input>
                    <span style="position:absolute;left:170px;width:300px;top:0;">（注：同一平台下的游戏钱包名请保持一致）</span>
              </el-form-item>
           <el-form-item  prop="isCenterWallet" label="是否为中心钱包" style="margin-top:10px;">
            <el-select  v-model="form.isCenterWallet">
                <el-option :value="0" label="否"></el-option>
                <el-option :value="1" label="是"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item  prop="shelfStatus" label="是否下架" style="margin-top:10px;">
            <el-select  v-model="form.shelfStatus">
                <el-option :value="1" label="否"></el-option>
                <el-option :value="0" label="是"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="toSave">确 定</el-button>
          </div>
    </div>

</template>

<script>

import EditorImage from '@/components/Tinymce/components/editorImage';
import {
  form, grid, dialog, factory,
} from '@/build';
import {
  gameAngleConfigApi as angleConfig,
  gameSettingDetail,
} from '@/services/api/game';

export default {
  name: 'subGameAngleConfig',
  mixins: [form, grid, dialog, factory],
  components: { EditorImage },
  props: ['row'],
  data() {
    return {
      rule: {
        // picUrl: [
        //   { required: true, message: '请上传图片', trigger: 'change' },
        // ],
        descript: [
          { required: true, message: '请输入平台介绍', trigger: 'change' },
        ],
        walletName: [
          { required: true, message: '请输入钱包名', trigger: 'change' },
        ],
        // link: [
        //   { required: true, message: '请输入链接', trigger: 'change' },
        // ],
        navGroup: [
          { required: true, message: '请选择所属类型', trigger: 'change' },
        ],
      },
      i: null,
      index: null, // 用于记录数组里的存储路径
      typeList: [
        { title: '敬请期待...', value: 1 },
        { title: '新上线', value: 2 },
        { title: '推荐', value: 3 },
        { title: '无角标', value: 0 },
      ],
      orderList: [
        { lable: 1, value: 1 },
        { lable: 2, value: 2 },
        { lable: 3, value: 3 },
        { lable: 4, value: 4 },
        { lable: 5, value: 5 },
        { lable: 6, value: 6 },
        { lable: 7, value: 7 },
        { lable: 8, value: 8 },
        { lable: 9, value: 9 },
        { lable: 10, value: 10 },
      ],
      gameTypeList: [
        { title: '体育', value: 'sport' },
        { title: '真人', value: 'real' },
        { title: '彩票', value: 'lottery' },
        { title: '棋牌', value: 'poker' },
        { title: '电子', value: 'digital' },
      ],
      form: {
        recommendType: 0,
        descript: '',
        navGroup: null,
        maintenId: this.row.maintenId,
        walletName: '',
        isCenterWallet: 0,
        shelfStatus: 1,
        portList: [
          {
            portName: 'PC官网',
            showClient: 1, // 平台类型 1 PC 2 APP 3 H5 4 个人中心
            // recommendType: 0, // 角标类型
            link: null, // 跳转链接
            isShow: false,

            detail: [
              {
                title: '导航栏下拉弹窗',
                canOrder: true,
                area: 1, // 配置位置 1导航栏 2 推荐位 3 转账钱包入口 4 首页入口 5游戏平台商logo 6 入口
                picUrl: '',
                position: null, // 顺序
              },
              {
                title: '落地页',
                canOrder: true,
                area: 2,
                picUrl: '',
                position: null,
              },
              {
                title: '转账钱包入口',
                canOrder: true,
                area: 3,
                picUrl: '',
                position: null,
              },
            ],
          },
          {
            portName: '贝博娱乐App首页',
            showClient: 2, // 平台类型
            // recommendType: 0, // 角标
            link: null, // 跳转链接
            isShow: false,
            detail: [
              {
                title: '首页入口 icon',
                canOrder: true,
                area: 4,
                picUrl: '',
                position: null,
              },
              {
                title: '游戏平台商 logo',
                canOrder: false,
                area: 5,
                picUrl: '',
                position: null,
              },
            ],
          },
          {
            portName: '贝博娱乐h5首页',
            showClient: 3, // 平台类型
            // recommendType: 0, // 角标
            link: null, // 跳转链接
            isShow: false,
            detail: [
              {
                title: '首页入口 icon',
                canOrder: true,
                area: 4,
                picUrl: '',
                position: null,
              },
              {
                title: '游戏平台商 logo',
                canOrder: false,
                area: 5,
                picUrl: '',
                position: null,
              },
            ],
          },
          {
            portName: '贝博体育个人中心',
            showClient: 4, // 平台类型
            // recommendType: 0, // 角标
            link: null, // 跳转链接
            isShow: false,
            detail: [
              {
                title: '入口 icon',
                canOrder: true,
                area: 6,
                picUrl: '',
                position: null,
              },
            ],
          },
        ],
      },
      configResult: {}, // 游戏配置查询结果

    };
  },

  methods: {
    deleteImg(item) { // 删除图片
      item.picUrl = null;
    },
    handleClick(i, index) {
      this.i = i;
      this.index = index;
    },
    imageSuccessCBK(val) {
      this.$nextTick(() => {
        this.form.portList[this.i].detail[this.index].picUrl = val[0].url;// 数组里的picUrl赋值
      });
    },

    toSave() {
      this.$refs.gameAngleConfig.validate((valid) => {
        if (valid) {
          this.doSave({ action: 'saveForm', form: 'gameAngleConfig' });
        }
      });
    },
    cancel() {
      this.$emit('input', false);
    },
  },
  mounted() {
    this.bindGet(gameSettingDetail, 'configResult', {
      action: 'getdetail',
      sendingData: { maintenId: this.row.maintenId },
      format: (data) => {
        // this.form = data[0];
        this.form.maintenId = data[0].maintenId;
        this.form.navGroup = data[0].navGroup;
        this.form.descript = data[0].descript;
        this.form.walletName = data[0].walletName;
        this.form.shelfStatus = data[0].shelfStatus;
        this.form.isCenterWallet = data[0].isCenterWallet;
        this.form.recommendType = data[0].recommendType;
        _.forEach(this.form.portList, (portItem, pindex) => {
          _.forEach(portItem.detail, (detailItem, dindex) => {
            _.forEach(data, (item, index) => {
              _.forEach(item.show, (areaItem, aindex) => {
                _.forEach(areaItem.area, (areaItemChild, acindex) => {
                  if (detailItem.area == areaItemChild.area && portItem.showClient == areaItem.showClient) { // 防止娱乐APP和H5取重复
                    detailItem.picUrl = areaItemChild.picUrl;
                    portItem.link = areaItem.link;
                    detailItem.position = areaItemChild.position;
                    // portItem.recommendType = areaItem.recommendType;
                    portItem.showClient = areaItem.showClient;
                  }
                });
              });
            });
          });
        });
        return data;
      },
    });
    this.getAll();
    this.bindSave(angleConfig, 'saveForm', 'form', {
      beforeSend: data => ({
        walletName: data.walletName,
        descript: data.descript,
        maintenId: data.maintenId,
        navGroup: data.navGroup,
        show: data.portList,
        isCenterWallet: data.isCenterWallet,
        shelfStatus: data.shelfStatus,
        recommendType: data.recommendType,
      }),


      afterSuccess: () => {
        this.cancel();
        this.$parent.getAll();
      },
    });
  },
};
</script>

<style lang="scss" scoped>
  .image {
    display: block;
    width: 85%;
    height: 150px;
    margin-bottom:20px;

  }
  .el-form-item__content>div{display: flex}
  /deep/ .el-form-item__content .el-checkbox{
    margin-right:20px
  }
 /deep/  .el-form-item__content .el-checkbox{
   margin-left:0
  }
    span{
      cursor: pointer;
    }
    .dialog-footer{
      text-align: right;
    }
    .el-form--inline .el-form-item{
      display: flex;
      align-items: center;

    }
    /deep/ .game-angle-config__bottom .el-form-item{
      margin-bottom:20px !important
    }
    .game-angle-config_buttonGroup{
      float:right;
    }
    .game-angle-config_remark{
      color:#969696;
    }
   .game-angle-config__top{
      display: flex;
      justify-content: space-between;
      align-items: center;

    }
    .game-angle-config__bottom{
      display: flex;
      justify-content: space-between;
      }
    .game-angle-config__bottom .uplode-box{
      width: 33%;
      text-align: center;
    }
    .game-angle-config__item{
      border:1px solid  #999;
      margin-bottom:10px;
    }
    .game-angle-config__bottom{
      border-top:1px solid #999;
    }
    .game-angle-config__top,.game-angle-config__bottom{
      padding:10px;
    }
    /deep/ .el-textarea__inner{
      border:none;
      margin:0;
      width:600px;
    }
    .img-box{
      position:relative;
    }
    .img-box i{
      position:absolute;
      color: red;
     // background: #fff;
      top:-8px;
      right:15%;
      font-size: 20px;
      cursor: pointer;
    }
</style>
